<template>
    <div class="params">
        <el-alert show-icon title="注意：只允许为第三级分类设置相关参数！" type="warning" effect="dark">
        </el-alert>
        <p class="sjld">
            选择商品分类:<el-cascader v-model="value" :options="options"
                :props="{ expandTrigger: 'hover', label: 'cat_name', value: 'cat_id' }"
                @change="handleChange"></el-cascader>
        </p>
        <!-- 表格 -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="动态参数" name="many">
                <el-button type="primary" @click="dttrue">添加参数</el-button>
                <template>
                    <template>
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-form label-position="left" inline class="demo-table-expand">
                                        <el-tag :key="tag" v-for="tag, i in props.row.attr_vals" closable
                                            :disable-transitions="false" @close="handleClose(props.row, i)">
                                            {{ tag }}
                                        </el-tag>
                                        <el-input class="input-new-tag" v-if="props.row.inputVisible"
                                            v-model="props.row.inputValue" ref="saveTagInput" size="small"
                                            @keyup.enter.native="handleInputConfirm(props.row)"
                                            @blur="handleInputConfirm(props.row)">
                                        </el-input>
                                        <el-button v-else class="button-new-tag" size="small"
                                            @click="showInput(props.row)">+ New
                                            Tag</el-button>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column type="index">
                            </el-table-column>
                            <el-table-column prop="attr_name" label="参数名称">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary"
                                        @click="editdt(scope.row, scope.$index)">编辑</el-button>
                                    <el-button size="mini" type="danger" @click="delm(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </template>
            </el-tab-pane>
            <el-tab-pane label="静态参数" name="only">
                <el-button type="primary" @click="jttrue">添加属性</el-button>
                <template>
                    <template>
                        <el-table :data="tableData1" border style="width: 100%">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-form label-position="left" inline class="demo-table-expand">
                                        <el-tag :key="tag" v-for="tag, i in props.row.attr_vals" closable
                                            :disable-transitions="false" @close="handleClose(props.row, i)">
                                            {{ tag }}
                                        </el-tag>
                                        <el-input class="input-new-tag" v-if="props.row.inputVisible"
                                            v-model="props.row.inputValue" ref="saveTagInput" size="small"
                                            @keyup.enter.native="handleInputConfirm(props.row)"
                                            @blur="handleInputConfirm(props.row)">
                                        </el-input>
                                        <el-button v-else class="button-new-tag" size="small"
                                            @click="showInput(props.row)">+ New
                                            Tag</el-button>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column type="index">
                            </el-table-column>
                            <el-table-column prop="attr_name" label="参数名称">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary"
                                        @click="editjt(scope.row, scope.$index)">编辑</el-button>
                                    <el-button size="mini" type="danger" @click="dely(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </template>
            </el-tab-pane>
        </el-tabs>
        <!-- 添加修改动态参数弹出框 -->
        <el-dialog :title="dttitle" :visible.sync="dialogVisibledt" width="30%">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="动态参数" prop="attr_name">
                    <el-input v-model="ruleForm.attr_name"></el-input>
                </el-form-item>
            </el-form>
            <!-- <span>这是一段信息</span> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibledt = false">取 消</el-button>
                <el-button type="primary" @click="dtadd">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加修改静态参数弹出框 -->
        <el-dialog :title="jttitle" :visible.sync="dialogVisiblejt" width="30%">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="静态参数" prop="attr_name">
                    <el-input v-model="ruleForm.attr_name"></el-input>
                </el-form-item>
            </el-form>
            <!-- <span>这是一段信息</span> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisiblejt = false">取 消</el-button>
                <el-button type="primary" @click="jtadd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getcategories, getcategoriesList, getcategoriesdelm, getcategoriesdtadd, getcategoriesdtedit, getcategoriesdtaddtsg } from "../utils/commodity"
export default {
    data() {
        return {
            dialogVisiblejt: false,
            jttitle: "",
            dialogVisibledt: false,
            dttitle: "",
            value: "",
            options: [],
            tableData: [],
            tableData1: [],
            label: "",
            idx: 0,
            activeName: "many",
            dynamicTags: [],
            inputVisible: false,
            inputValue: '',
            delattr_id: 0,
            attr_vals: "",
            ruleForm: {
                attr_name: ""
            },
            rules: {
                attr_name: [
                    { required: true, message: '请输入参数', trigger: 'blur' },
                ],
            },
            editidx: -1,
            editids: 0
        }
    },
    methods: {
        handleChange(val) {
            console.log(val);
            if (val.length == 3) {
                this.idx = val[2]
                this.handleClick()
            } else {
                this.$message({
                    message: '只允许为三级分类',
                    type: 'warning'
                });
                return false
            }

        },
        //静态参数添加弹出层
        jttrue() {
            this.dialogVisiblejt = true
            this.jttitle = "添加静态参数"
            this.ruleForm = {}
        },
        //静态编辑弹出层
        editjt(row, id) {
            // console.log(172,row);
            this.dialogVisiblejt = true
            this.jttitle = "修改静态参数"
            this.ruleForm = { ...row }
            this.editidx = id
            this.editids = row.attr_id
        },
        //静态添加&&编辑
        jtadd() {
            //添加静态参数
            if (this.editidx == -1) {
                //静态添加
                let params = {
                    id: this.idx,
                    attr_name: this.ruleForm.attr_name,
                    attr_sel: this.activeName,
                }
                getcategoriesdtadd(params).then(res => {
                    console.log(188, res);
                    if (res.meta.status == 201) {
                        getcategoriesList({ id: this.idx, sel: this.activeName }).then(res => {
                            console.log(res);
                            this.tableData1 = res.data
                        })
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        this.dialogVisiblejt = false
                    }
                })
            } else {
                //编辑静态参数
                let obj = {
                    id: this.idx,
                    attr_name: this.ruleForm.attr_name,
                    attr_sel: this.activeName,
                    attrId: this.editids
                }
                getcategoriesdtedit(obj).then(res => {
                    console.log(201, res);
                    if (res.meta.status == 200) {
                        getcategoriesList({ id: this.idx, sel: this.activeName }).then(res => {
                            console.log(res);
                            this.tableData1 = res.data
                        })
                        this.$message({
                            type: 'success',
                            message: res.meta.msg
                        });
                        this.dialogVisiblejt = false
                        this.editidx = -1
                    }
                })
            }
        },
        //动态参数添加弹出层
        dttrue() {
            this.dttitle = "添加"
            this.dialogVisibledt = true
            this.ruleForm = {}
        },
        //动态添加&&编辑
        dtadd() {
            if (this.editidx == -1) {
                //添加动态编辑
                let params = {
                    id: this.idx,
                    attr_name: this.ruleForm.attr_name,
                    attr_sel: this.activeName,
                }
                getcategoriesdtadd(params).then(res => {
                    console.log(161, res);
                    if (res.meta.status == 201) {
                        getcategoriesList({ id: this.idx, sel: this.activeName }).then(res => {
                            console.log(res);
                            this.tableData = res.data
                        })
                        this.$message({
                            type: 'success',
                            message: res.meta.msg
                        });
                        this.dialogVisibledt = false
                    }
                })
            } else {
                //编辑动态编辑
                let obj = {
                    id: this.idx,
                    attr_name: this.ruleForm.attr_name,
                    attr_sel: this.activeName,
                    attrId: this.editids
                }
                getcategoriesdtedit(obj).then(res => {
                    console.log(res);
                    if (res.meta.status == 200) {
                        getcategoriesList({ id: this.idx, sel: this.activeName }).then(res => {
                            console.log(res);
                            this.tableData = res.data
                        })
                        this.$message({
                            type: 'success',
                            message: res.meta.msg
                        });
                        this.dialogVisibledt = false
                        this.editidx = -1
                    }
                })
            }
        },
        // 触发动态编辑弹出层
        editdt(row, id) {
            // console.log(283,row);
            this.dialogVisibledt = true
            this.dttitle = "修改动态参数"
            this.ruleForm = { ...row }
            this.editidx = id
            this.editids = row.attr_id
        },
        // 动态参数删除
        delm(val) {
            console.log(val);
            this.delattr_id = val.attr_id
            getcategoriesdelm({ id: this.idx, attrid: this.delattr_id }).then(res => {
                console.log(res);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    getcategoriesList({ id: this.idx, sel: this.activeName }).then(res => {
                        console.log(res);
                        this.tableData = res.data
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            })

        },
        //静态参数删除
        dely(val) {
            console.log(val);
            this.delattr_id = val.attr_id
            getcategoriesdelm({ id: this.idx, attrid: this.delattr_id }).then(res => {
                console.log(res);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    getcategoriesList({ id: this.idx, sel: this.activeName }).then(res => {
                        console.log(res);
                        this.tableData1 = res.data
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            })

        },
        // 状态切换
        handleClick(tab, event) {
            console.log(tab, event);
            getcategoriesList({ id: this.idx, sel: this.activeName }).then(res => {
                console.log(res);
                res.data.forEach(item => {
                    item.attr_vals = item.attr_vals ? item.attr_vals.split(",") : [];
                    item.inputVisible = false
                    item.inputValue = ""
                });
                if (this.activeName == "many") {
                    this.tableData = res.data
                } else {
                    this.tableData1 = res.data
                }
            })
        },
        // 删除tag
        handleClose(row, i) {
            // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            row.attr_vals.splice(i, 1)
            let obj = {
                id: row.cat_id,
                attrId: row.attr_id,
                attr_name: row.attr_name,
                attr_sel: row.attr_sel,
                attr_vals: row.attr_vals.join(',')
            }
            getcategoriesdtaddtsg(obj).then(res => {
                console.log(390, res);
                // this.tableData.push()
            })
        },
        showInput(row) {
            row.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.focus();
            });
        },
        //添加tag标签
        handleInputConfirm(row) {
            let inputValue = row.inputValue;
            if (inputValue) {
                row.attr_vals.push(inputValue);
            }
            row.inputVisible = false;
            row.inputValue = '';
            let obj = {
                id: row.cat_id,
                attrId: row.attr_id,
                attr_name: row.attr_name,
                attr_sel: row.attr_sel,
                attr_vals: row.attr_vals.join(',')
            }
            getcategoriesdtaddtsg(obj).then(res => {
                console.log(390, res);
                // this.tableData.push()
            })
        }

    },
    created() {
        getcategories().then(res => {
            console.log(40, res);
            this.options = res.data
        })
    },
    mounted() {

    },
    components: {

    },
    computed: {

    },
    watch: {

    },
}
</script>

<style lang='scss' scoped>
.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}

.params {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;

    .sjld {
        margin: 20px 0;
    }
}
</style>
